<template>
	<view class="app-container">
		<swiper class="imgSwiper" indicator-dots circular>
			<swiper-item v-for="item in bannerlist" :key="item.id">
				<image :src="item.bannerUrl"></image>
			</swiper-item>
		</swiper>
		<u-cell-group :border="false" class="notice">
			<u-cell :border="false" icon="/static/icons/gonggao.svg" isLink url="/pages/notice/notice">
				<view slot="title">
					<text>{{ noticesList[0] && noticesList[0].title }}</text>
				</view>
			</u-cell>
		</u-cell-group>

		<view class="shouyi">
			<navigator class="device-shouyi"
				:url="'/pages/deviceshouyi/deviceshouyi?item=' + encodeURIComponent(JSON.stringify(totalmoney))">
				<div class="left">
					<div class="money">￥{{ totalmoney[0] }}</div>
					<div class="text">设备收益</div>
				</div>
				<div class="right">
					<image src="@/static/icons/shebeishouyi.svg"></image>
				</div>
			</navigator>
			<navigator class="share-shouyi" url="/pages/shareshouyi/shareshouyi">
				<div class="left">
					<div class="money">￥{{ award }}</div>
					<div class="text">分享收益</div>
				</div>
				<div class="right">
					<image src="@/static/icons/fenxiangshouyi.svg"></image>
				</div>
			</navigator>
		</view>

		<view class="my-device">
			<view class="title">我的设备</view>
			<u-input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
				v-model="searchVal" placeholder="请输入需要管理手机号或昵称" class="search-input">
				<template slot="suffix" v-if="isInputContent">
					<u-button text="搜索" type="success" size="mini" @click="onClick"></u-button>
				</template>
			</u-input>
			<view class="device-list">
				<view class="clearfix device-title">
					<view class="fl">
						<text>任务手机</text>
					</view>
					<view class="right-icon fr">
						<image src="@/static/icons/xufei.svg" mode=""></image>
						<image src="@/static/icons/shuaxin.svg" mode=""></image>
						<image src="@/static/icons/gengduo.svg" mode="" @click="showMoreMenu"></image>
						<view class="more-menu" v-if="isShowMoreMenu" :class="{ active: isShowMoreMenu }">
							<u-cell-group :border="false">
								<u-cell title="全选" @click="onSelectAll"></u-cell>
								<u-cell title="暂停" @click="onPause('cmd_ClientPause')"></u-cell>
								<u-cell title="继续" @click="onPause('cmd_ClientRunTask')"></u-cell>
								<u-cell title="重启" @click="onPause('cmd_ClientReboot')"></u-cell>
								<u-cell title="维护" @click="onPause('cmd_ClientMaintain')"></u-cell>
								<u-cell title="退出" @click="isShowMoreMenu = false"></u-cell>
							</u-cell-group>
						</view>
					</view>
				</view>
				<view>
					<u-checkbox-group class="checkbox-group" v-model="selectList">
						<view class="device-item clearfix" v-for="item in list" :key="item.id">
							<div class="clearfix left-container" @click="handleOpen(item)">
								<div class="fl left">
									<label>
										<u-checkbox shape="circle" :name="item.id"></u-checkbox>
									</label>
									<image src="../../static/logo.png" class="photo" mode=""></image>
									<div>
										<div>
											<text class="username">{{ item.nickName }}</text>
											<image src="@/static/icons/zaixian.svg" class="online" mode=""></image>
										</div>
										<text class="usertel">{{ item.phone }}</text>
									</div>
								</div>
								<div class="fr right">
									<div>
										<image src="@/static/icons/jiayou-lvse.svg" mode=""></image>
										<div>{{ item.effectHint }}</div>
									</div>
									<div>
										<image src="@/static/icons/xinhao-lvse.svg" mode=""></image>
										<div>WIFI</div>
									</div>
									<div>
										<image src="@/static/icons/dianchi-lvse.svg" mode=""></image>
										<div>{{ item.active }}%</div>
									</div>
								</div>
							</div>
							<div class="btn-group fr">
								<navigator class="nav-btn" :url="'/pages/unreadmsg/unreadmsg?phoneId=' + item.id">
									{{ `未读消息(${item.errorCount})` }}
								</navigator>
								<u-button text="去续费" @click="goToRenew(item)"></u-button>
							</div>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<u-modal :show="pauseModalShow" :title="title" :showCancelButton="true" confirmColor="#00B6FC"
			cancelColor="#656565" :content="`以下选中手机会` + title" @cancel="onCancel" @confirm="onConfirmPause"
			class="pause-modal"></u-modal>
		<modal-popup></modal-popup>
		<PayPopup ref="payPopupRef" type="operation" title="选中操作" :phoneId="phoneId"></PayPopup>
	</view>
</template>

<script>
	import {
		getTaskPhoneList,
		getBanners,
		getIncomes,
		sendCmd,
		getRenew,
		getUserInfo
	} from '@/api/api.js'
	import ModalPopup from '@/components/ModalPopup/ModalPopup.vue'
	import config from '../../uni_modules/uview-ui/libs/config/config'
	import PayPopup from "@/components/payPopup/payPopup.vue"
	export default {
		components: {
			ModalPopup,
			PayPopup
		},
		data() {
			return {
				show: false,
				searchVal: '',
				isShowMoreMenu: false,
				list: [],
				bannerlist: [],
				pauseModalShow: false,
				actionsList: [{
						name: '新增任务手机',
						color: '#000',
						fontSize: '16'
					},
					{
						name: '绑定老任务手机',
						color: '#000',
						fontSize: '16'
					}
				],
				totalmoney: [], //设备收益
				phone: '',
				selectList: [],
				isHistory: 1,
				sendType: {
					cmd_ClientReboot: '重启',
					cmd_ClientPause: '暂停',
					cmd_ClientRunTask: '继续',
					cmd_ClientMaintain: '维护'
				},
				sendKey: '',
				title: '',
				phoneId: ''
			}
		},
		computed: {
			isInputContent() {
				return this.searchVal
			},
			clickCount() {
				return this.isShowMoreMenu ? 1 : 0
			},
			noticesList() {
				return this.$store.state.noticeList
			},
			award() {
				return this.$store.state.user.award
			}
		},
		mounted() {
			uni.onTabBarMidButtonTap(() => {
				this.show = true
			})
		},
		onLoad() {
			this.onInitFn()
		},
		onShow() {
			this.getTask()
		},
		onHide() {
			this.$refs.payPopupRef.close()
			this.$store.dispatch('changeShowAction', false)
		},
		methods: {
			onInitFn() {
				this.getHomePage()
				this.getIncomesFn()
				uni.showLoading({
					mask: true
				})

				this.$store.dispatch('setNotice')
			},
			getTask() {
				getTaskPhoneList({
						id: this.$store.state.user.id
					})
					.then((res) => {
						if (res.code === 10000) {
							this.list = res.data
						}
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			// 轮播图
			async getHomePage() {
				const config = {
					channel: 'starsmoon'
				}
				const res = await getBanners(config)
				if (res.code === 10000) {
					this.bannerlist = res.data
				}
			},
			// 设备收益
			async getIncomesFn() {
				const config = {
					id: this.$store.state.user.id,
					isHistory: this.isHistory
				}
				const res = await getIncomes(config)
				if (res.code === 10000) {
					this.totalmoney = res.data
				}
			},
			// 去续费
			async goToRenew(item) {
				uni.navigateTo({
					url: '/pages/payManagement/payManagement?phoneId=' + item.id
				})
			},
			onPause(key) {
				this.sendKey = key
				this.title = this.sendType[key]
				this.pauseModalShow = true
			},
			onCancel() {
				this.pauseModalShow = false
			},
			async onConfirmPause() {
				const res = sendCmd({
					cmd: this.sendKey,
					phones: this.list.map(item => item.phone)
				})
				this.pauseModalShow = false
				this.isShowMoreMenu = false
			},
			onClick() {},
			showMoreMenu() {
				if (this.clickCount % 2 === 0) {
					this.isShowMoreMenu = true
				} else {
					this.isShowMoreMenu = false
				}
			},
			onSelectAll() { //全选
				this.selectList = this.list.map(item => item.id)
			},
			handleOpen(item) {
				this.phoneId = item.id
				this.$refs.payPopupRef.open()
			}
		},

		async onPullDownRefresh() {
			await this.onInitFn()
			uni.stopPullDownRefresh(); //停止刷新
		}
	}
</script>

<style lang="scss">
	.imgSwiper {
		width: 327px;
		height: 150px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.notice {
		margin: 14px 0;
		background-color: #fff;
		padding: 12px 0;
	}

	.shouyi {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		box-sizing: border-box;
		margin-bottom: 18px;

		.device-shouyi,
		.share-shouyi {
			background-color: #fff;
			padding: 12px;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			width: 50%;
			position: relative;

			&:last-child {
				margin-left: 13px;
			}

			.left {
				.money {
					color: #00b6fc;
					font-size: 24px;
					line-height: 34px;
					margin-bottom: 8px;
				}

				.text {
					color: #000;
					font-size: 14px;
					line-height: 20px;
				}
			}

			.right {
				position: absolute;
				bottom: 12px;
				right: 12px;

				image {
					width: 34px;
					height: 30px;
				}
			}
		}
	}

	.my-device {
		background-color: #fff;
		box-sizing: border-box;
		padding: 16px 12px;

		.title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 12px;
		}

		.search-input {
			background-color: #f5f6f7;
			margin-bottom: 14px;

			&::placeholder {
				color: #c7c7c7;
			}
		}

		.device-list {
			.device-title {
				text {
					font-size: 16px;
					font-weight: bold;
				}

				margin-bottom: 12px;
				height: 20px;
				line-height: 20px;
			}

			.right-icon {
				position: relative;

				image {
					width: 14px;
					height: 14px;
					margin-left: 14px;
				}

				.more-menu {
					position: absolute;
					height: 0px;
					opacity: 0;
					background-color: #fff;
					z-index: -1;
					width: 200px;
					right: 0;
					font-size: 24px;
					// font-weight: bold;
					padding: 8px 12px;
					border: 1px solid #ccc;
					border-radius: 6px;

					&::deep .u-cell__body {
						padding-left: 0 !important;
					}

					&.active {
						height: 276px;
						opacity: 1;
						z-index: 10;
					}
				}
			}

			.u-cell__body {
				padding-left: 0 !important;
			}

			.checkbox-group {
				display: block;
			}

			.device-item {
				width: 100%;
				padding-top: 14px;
				padding-bottom: 12px;
				border-bottom: 1px solid #d8d8d8;
				height: 88px;

				.photo {
					width: 42px;
					height: 42px;
					border-radius: 50%;
					margin: 0 6px 0 10px;
				}

				.online {
					width: 12px;
					height: 12px;
					margin-left: 6px;
				}

				.left-container {
					height: 42px;
					width: 100%;
					box-sizing: border-box;
					margin-bottom: 16px;

					.left {
						display: flex;
						justify-content: flex-start;
						width: 60%;
						box-sizing: border-box;

						label {
							margin-top: 12px;
						}

						.username {
							font-size: 14px;
						}

						.usertel {
							font-size: 12px;
						}
					}

					.right {
						display: flex;
						justify-content: flex-end;
						flex-wrap: nowrap;
						box-sizing: border-box;
						width: 40%;

						>div {
							width: 33.33%;
							text-align: center;

							>div {
								font-size: 10px;
							}
						}

						image {
							width: 20px;
							height: 20px;
						}
					}
				}

				.btn-group {
					.nav-btn {
						display: inline-block;
						padding: 4px 12px;
						font-size: 12px;
						line-height: 16px;
						border: 1px solid #01b5fc;
						border-radius: 3px;
						vertical-align: middle;
					}

					button {
						vertical-align: middle;
						border-color: #01b5fc;
						display: inline-block;
						padding: 4px 12px;
						font-size: 12px;
						height: unset;
						width: unset;
						line-height: 16px;
						margin-left: 14px;
					}
				}
			}
		}
	}

	.pause-modal {
		.u-modal__title {
			color: #ff3e33 !important;
		}
	}
</style>
